<template>
  <div class="dashboard-container">
    <h1 style="text-align: center">凌风云链TEMU工具箱</h1>
    <br />
    <br />
    <!--<div v-html="noticeDetail" class="notice-html" />-->
    <div v-loading="htmlLoading">
      <iframe
        id="$$noticeBox$$"
        title="公告"
        width="100%"
        height="800px"
        :src="noticeUrl"
      />
    </div>
    <el-dialog v-model="notice.visible" :title="notice.name" width="40%">
      <div v-loading="notice.loading" class="notice-wrap">
        <div class="notice-text">{{ notice.text }}</div>
        <div class="notice-check">
          <el-checkbox v-model="notice.checked">已阅读，请不再提醒</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            :loading="notice.loading"
            @click="loopNotice"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import {
  sysNotice,
  sysNoticeDetail,
  sysNoticeDialog,
  sysNoticeDialogByIdc,
  sysNoticeDialogNotTip
} from '@/api/auth'

const noticeUrl = ref('')
const noticeDetail = ref('')
const htmlLoading = ref(false)
const detail = async (notice_id) => {
  htmlLoading.value = true
  try {
    const { notice_html, notice_url } = await sysNoticeDetail(notice_id)
    noticeDetail.value = notice_html
    noticeUrl.value = notice_url
  } finally {
    htmlLoading.value = false
  }
}

const notice = reactive({
  name: '',
  visible: false,
  text: '',
  ids: [],
  curId: null,
  nextId: null,
  checked: false,
  loading: false
})
const getNoticeMsg = async () => {
  const { popupNoticeIdList } = await sysNoticeDialog()
  notice.ids = [...popupNoticeIdList]
  notice.nextId = notice.ids[0]
  await loopNotice()
}
const loopNotice = async () => {
  if (notice.nextId) {
    notice.curId = notice.nextId
    notice.nextId = null
    notice.loading = true
    try {
      const { content } = await sysNoticeDialogByIdc(notice.curId)
      if (notice.checked) {
        await sysNoticeDialogNotTip(notice.curId)
      }
      notice.ids.shift()
      notice.visible = true
      notice.name = content.name
      notice.text = content.text
      notice.checked = false
      notice.nextId = notice.ids[0]
    } finally {
      notice.loading = false
    }
  } else {
    notice.visible = false
  }
}

onMounted(async () => {
  const { notice_infos } = await sysNotice()
  if (Array.isArray(notice_infos) && notice_infos.length > 0) {
    await detail(notice_infos[0].notice_id)
  }
  if (sessionStorage.getItem('_TEMU_NOTIFICATION_') === '1') {
    getNoticeMsg()
    sessionStorage.removeItem('_TEMU_NOTIFICATION_')
  }
})
</script>

<style lang="scss">
.dashboard-container {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  min-height: 100%;
  :deep(.notice-html) {
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    img {
      width: 100% !important;
    }
  }
}

.notice-wrap {
  .notice-text {
    font-weight: 500;
    color: #95d475;
    padding-bottom: 20px;
    word-break: break-all;
  }
  .el-checkbox {
    color: #337ab7;
  }
}
</style>
